<template>
  <div class="engine-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>数据处理引擎</span>
          <el-button type="primary" @click="$router.push('/engine/config')">
            引擎配置
          </el-button>
        </div>
      </template>
      
      <div class="engine-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="feature-card" @click="$router.push('/engine/config')">
              <div class="feature-icon">
                <el-icon size="48" color="#409EFF">
                  <Setting />
                </el-icon>
              </div>
              <div class="feature-title">引擎配置</div>
              <div class="feature-desc">
                配置数据处理引擎的核心参数和处理流程
              </div>
            </div>
          </el-col>
          
          <el-col :span="6">
            <div class="feature-card" @click="handleFieldMapping">
              <div class="feature-icon">
                <el-icon size="48" color="#67C23A">
                  <Connection />
                </el-icon>
              </div>
              <div class="feature-title">字段映射</div>
              <div class="feature-desc">
                配置数据源与目标字段的映射关系
              </div>
            </div>
          </el-col>
          
          <el-col :span="6">
            <div class="feature-card" @click="handleCollisionCheck">
              <div class="feature-icon">
                <el-icon size="48" color="#E6A23C">
                  <Warning />
                </el-icon>
              </div>
              <div class="feature-title">撞库检测</div>
              <div class="feature-desc">
                配置数据重复性和撞库检测规则
              </div>
            </div>
          </el-col>
          
          <el-col :span="6">
            <div class="feature-card" @click="handleValidationRules">
              <div class="feature-icon">
                <el-icon size="48" color="#F56C6C">
                  <CircleCheck />
                </el-icon>
              </div>
              <div class="feature-title">验证规则</div>
              <div class="feature-desc">
                设置数据验证和清洗规则
              </div>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="6">
            <div class="feature-card" @click="handleScriptConfig">
              <div class="feature-icon">
                <el-icon size="48" color="#909399">
                  <Document />
                </el-icon>
              </div>
              <div class="feature-title">脚本配置</div>
              <div class="feature-desc">
                管理数据处理脚本和自定义处理逻辑
              </div>
            </div>
          </el-col>
          
          <el-col :span="6">
            <div class="feature-card" @click="handleMonitor">
              <div class="feature-icon">
                <el-icon size="48" color="#00CED1">
                  <Monitor />
                </el-icon>
              </div>
              <div class="feature-title">处理监控</div>
              <div class="feature-desc">
                实时监控数据处理状态和性能
              </div>
            </div>
          </el-col>
        </el-row>
        
        <el-divider />
        
        <div class="engine-stats">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-statistic title="今日处理量" :value="12345" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="成功率" :value="98.5" suffix="%" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="平均处理时间" :value="2.3" suffix="秒" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="活跃任务数" :value="15" />
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Setting, Connection, Warning, CircleCheck, Document, Monitor } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const handleFieldMapping = () => {
  // 跳转到字段映射配置
  router.push('/engine/config')
}

const handleCollisionCheck = () => {
  // 跳转到撞库检测配置
  router.push('/engine/config')
}

const handleValidationRules = () => {
  // 跳转到验证规则配置
  router.push('/engine/config')
}

const handleScriptConfig = () => {
  // 跳转到脚本配置
  router.push('/engine/config')
}

const handleMonitor = () => {
  // 跳转到处理监控
  router.push('/monitor')
}
</script>

<style scoped>
.engine-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #303133;
}

.engine-content {
  padding: 20px 0;
}

.feature-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 25px 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
}

.feature-card:hover {
  background: #ffffff;
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.feature-icon {
  margin-bottom: 15px;
}

.feature-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.feature-desc {
  font-size: 13px;
  color: #909399;
  line-height: 1.4;
}

.engine-stats {
  margin-top: 30px;
  padding: 20px;
  background: #f8f